import React, { useState } from 'react';
import s from './style.module.css';
import { Helper } from '@knownsec/react-component';
import toolSvg from '@/assets/svg/tool.svg';
import { datetime } from '@/common/formatter';
import { WARNING_SECURITYEVENT_MAP2 as MAP2 } from '@/common/common';
const STATUS_MAP = [
  '初始化',
  '等待调度',
  '等待执行',
  '执行中',
  '暂停中',
  '已暂停',
  '恢复中',
  '停止任务中',
  '任务已停止',
  '任务正常结束',
  '任务失败',
];
export default function info({ data, type ,modules}) {
  const resText = () => {
    const typeObj = { vul: '漏洞', securityEvent: '安全事件', risk_link: '风险外链' ,change_check:'篡改事件'};
    if(data.summary.score<0){
        return <div>本次检测未扫描到任何URL，您的业务系统处于未知状态，请确认您的业务系统是否在线</div>
    }
    let dom = null;
    if (type) {
      const num = data.risk_distribution[type]?.num || 0;
      if (num === 0) {
        dom = '本次检测未发现任何风险，您的业务系统处于安全状态';
      } else {
        dom = (
          <>
            发现
            <span>
            <><span style={{ color: 'red' }}>{data.risk_distribution[type]?.num}</span> 个{typeObj[type]}，</>
            </span>
            为了您的业务系统安全，请及时修复并加固安全防护。
          </>
        );
      }
      return <div>{dom}</div>;
    } else {
      const {securityEvent={},vul={},risk_link={},change_check={}} = data.risk_distribution;
      if (!securityEvent?.num && !vul?.num && !risk_link?.num && !change_check?.num) {
        dom = '本次检测未发现任何风险，您的业务系统处于安全状态';
      } else {
        dom = (
          <>
            发现
            {securityEvent && (
              <span>
                <span style={{ color: 'red' }}>{modules.includes('securityEvent')?securityEvent.num||0:0}</span>
                个安全事件，
              </span>
            )}
            {vul && (
              <span>
                <span style={{ color: 'red' }}>{modules.includes('vul')?vul.num||0:0}</span>个漏洞，
              </span>
            )}
            {risk_link && (
              <span>
                <span style={{ color: 'red' }}>{modules.includes('risk_link')?risk_link.num||0:0}</span>个风险外链，
              </span>
            )}
            {change_check && (
              <span>
                <span style={{ color: 'red' }}>{modules.includes('change_check')?change_check.num||0:0}</span>个篡改事件，
              </span>
            )}
            为了您的业务系统安全，请及时修复并加固安全防护。
          </>
        );
      }
      return <div>{dom}</div>;
    }
  };
  const resStatus = () => {
    if (type) {
      return (
        <span>
          <span className={s.statusInfo}>{MAP2[data.info?.addition?.task_type]}</span>
          &nbsp;({parseInt(data.info.progress)}%)
        </span>
      );
    } else {
      const info = data.task_info || {};
      const taskTypeStatusMaps = data.task_type_status_maps || {};
      return (
        <div className={s.status}>
          {Object.keys(MAP2).map((e)=>{
            if(info[e] && taskTypeStatusMaps[e] === 'ok'){
              const val=info[e]
              return (
                <span>
                  <span className={s.statusInfo}>{MAP2[e]}</span>
                  &nbsp;
                  {`(${parseInt(val.progress)}%)`}
                </span>
              );
            }
          })}
        </div>
      );
    }
  };
  return (
    <div className={s.infoMain}>
      <p className={s.title}>基本信息</p>
      <div className={s.table}>
        <p>
          <span className={s.table1}>业务系统地址：</span>
          <span>{data.target_url || data.info?.target_url}</span>
        </p>
        <p>
          <span className={s.table1}>任务状态：</span>
          {resStatus()}
        </p>
        {data.info && (
          <>
            <p>
              <span className={s.table1}>检测开始时间：</span>
              <span>{datetime(data.info.started_at) || '--'}</span>
            </p>

            <p>
              <span className={s.table1}>检测结束时间：</span>
              <span>{datetime(data.info.ended_at) || '--'}</span>
            </p>
          </>
        )}
        <p>
          <span className={s.table1}>已扫描URL数：</span>
          <span>{data.total_url}</span>
        </p>
      </div>
      <div className={s.box}>
        <div>
          <img src={toolSvg}></img> <span className={s.ml8}>检测结果</span>
          <Helper
            className="help pl8"
            placement="top"
            overlay="安全事件、风险外链及网页篡改数量按风险URL统计，漏洞数量按实际发现漏洞数统计。"
          ></Helper>
        </div>
        {resText()}
      </div>
    </div>
  );
}
